<template>
  <!-- Select 组件，支持远程搜索和静态选项 -->
  <a-select v-bind="$attrs" v-model:value="innerValue" :options="finalOptions" :loading="loading" :showSearch="showSearch" v-on="showSearch ? { search: onSearch } : {}" />
</template>

<script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'

interface Props {
  value?: any // v-model 绑定值
  api?: (_params?: any) => Promise<any> // 可选远程加载函数
  params?: Record<string, any> // 传给 API 的参数
  options?: any[] // 静态选项列表
  resultField?: string // API 返回结果中列表字段名
  labelField?: string // 显示字段
  valueField?: string // 值字段
  immediate?: boolean // 是否挂载时立即加载
  showSearch?: boolean // 是否启用搜索功能
}

const props = withDefaults(defineProps<Props>(), {
  immediate: true // 默认挂载时立即请求数据
})

const emit = defineEmits(['update:value'])

const loading = ref(false) // 是否正在加载
const dynamicOptions = ref<any[]>([]) // 动态加载的选项

// 最终渲染的 options（静态优先）
const finalOptions = computed(() => {
  return props.options?.length ? props.options : dynamicOptions.value
})

const innerValue = ref(props.value) // 内部 v-model 绑定值
const keyword = ref('') // 当前搜索关键词

// 搜索回调（用于联想）
const onSearch = (query: string) => {
  keyword.value = query // 更新搜索关键词
  fetchData() // 重新请求数据
}

// 请求数据（API 优先）
const fetchData = async () => {
  if (!props.api) return // 无 API 则不请求

  loading.value = true
  try {
    const res = await props.api({ ...props.params, keyword: keyword.value }) // 合并参数并请求
    const list = props.resultField ? res[props.resultField] || [] : res // 解析结果字段
    dynamicOptions.value = Array.isArray(list)
      ? list.map((item: any) => ({
          label: item[props.labelField || 'label'], // 提取 label
          value: item[props.valueField || 'value'] // 提取 value
        }))
      : []
  } catch (err) {
    console.error('ApiSelect fetch error:', err) // 请求异常
  } finally {
    loading.value = false // 请求结束
  }
}

// 监听外部 v-model:value 变化，更新内部值
watch(
  () => props.value,
  (val) => (innerValue.value = val)
)

// 监听内部值变化，向外触发 v-model 更新
watch(innerValue, (val) => emit('update:value', val))

// 监听 params 变化，重新请求
watch(
  () => props.params,
  () => {
    fetchData()
  },
  { deep: true }
)

// 初始化时加载数据
onMounted(() => {
  if (props.immediate !== false) {
    fetchData()
  }
})
</script>
